<template>
	<view class="viewbox auto " v-if="pageData.length">

		<block v-for="(item,index) in pageData" :key="item.id">
			<view class="list d-flex" @click="toUrl(`/pages/Details/Details?id=${item.id}`)">
				<image :src="Utils.imgUrls(item.v_headimg)" mode="aspectFill" class="UserHead"></image>
				<view class="flex-1 d-flex f-column j-sb">
					<view class="row j-sb a-center">
						<text class="flex-1 ellipsis black size30 bold m-right10" selectable>{{item.v_name}}</text>
						<view class="authen white" v-if="item.real_name == 1">
							<view class="iconfont icon-shimingrenzheng h7 m-top4"></view>
							<text class="h7 m-left8">已实名</text>
						</view>
					</view>
					<view class="ellipsis">
						<text class="label" v-if="item.house">{{item.house}}</text>
						<text class="label" v-if="item.career">{{item.career}}</text>
						<text class="label" v-if="item.salary">{{item.salary}}</text>
					</view>
					<view class="row">
						<text class="condition" v-if="item.age">{{item.age}}岁</text>
						<text class="condition" v-if="item.height">{{item.height}}cm</text>
						<text class="condition" v-if="item.education">{{item.education}}</text>
					</view>
					<view class="row">
						<image :src="Utils.imgUrls(sItem)" mode="aspectFill" class="MoreImg"
							v-for="(sItem,sIndex) in item.album.slice(0,3)" :key="sIndex"></image>
					</view>
				</view>
			</view>


		</block>
		<view class="noList auto m-top40" v-if="!pageData.length">
			<image :src="Utils.staticImg('pixcv_image.png')" mode="widthFix" class="rows"></image>
			<text class="color_cc size26 m-top20">暂无相关信息~</text>
		</view>







	</view>
</template>

<script setup>
	import { defineProps } from 'vue';
	import Utils from '@/common/utils.js';
	const props = defineProps(['pageData']);
</script>

<style lang="scss" scoped>
	.list {
		width: 100%;
		background-color: #ffffff;
		padding: 20rpx;
		border-radius: 10rpx;
		overflow: hidden;
		margin-top: 20rpx;
	}

	.UserHead {
		width: 230rpx;
		height: 240rpx;
		border-radius: 10rpx;
		margin-right: 20rpx;
	}

	.authen {
		display: flex;
		align-items: center;
		background-color: #52c9eb;
		border-radius: 20rpx;
		padding: 2rpx 8rpx;
	}

	.label {
		padding: 0 16rpx;
		position: relative;
		color: #8d8d8d;
		font-size: 24rpx;
	}

	.label:first-child {
		padding: 0 16rpx 0 0;
	}

	.label::after {
		content: '';
		width: 1rpx;
		height: 24rpx;
		background-color: #ccc;
		position: absolute;
		right: 0;
		top: 50%;
		transform: translate(0, -50%);
	}

	.label:last-of-type::after {
		display: none;
	}

	.condition {
		display: block;
		padding: 0 16rpx;
		border-radius: 20rpx;
		margin-right: 20rpx;
		font-size: 24rpx;
		color: $themeColor;
		border: 1rpx solid $themeColor;
	}

	.condition:last-child {
		margin-right: 0;
	}

	.MoreImg {
		width: 80rpx;
		height: 80rpx;
		border-radius: 6rpx;
		overflow: hidden;
		margin-right: 20rpx;
	}

	.MoreImg:last-child {
		margin-right: 0;
	}

	.noList {
		width: 500rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
</style>